<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限控制</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- Morris -->
    <link href="css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
    <!-- Gritter -->
    <link href="js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <style>
        .centerPersonalInformationBox{
            width: 8.75rem;
            margin:1.16rem auto;
        }
        .centerPersonalInformationBg{
            width:100%;
            height:2.07rem;
            border-radius: .13rem;
        }
        .centerPersonalInformationLine{
            width: 100%;
            height:1rem;
            border:1px solid rgba(226,226,226,1);
            border-radius: .13rem;
            margin-top: .23rem;
            position: relative;
        }
        .informationLineIcon{
            width: 1rem;
            height:100%;
            text-align: center;
            padding-top: .22rem;
        }
        .informationLineIcon{
            height:.38rem;
        }
        .informationLineRight{
            font-size: .12rem;
            color: #999;
            padding-top: .25rem;
        }
        .informationLineName{
            font-size: .16rem;
            color: #666;
            font-weight: bold;
        }
        .informationLinePhone{
            font-size: .16rem;
            color: #666;
            margin-left: .47rem;
        }
        .informationLineText{
            margin-top: .04rem;
        }
        .informationLineEditBen{
            border:1px solid #108EE9;
            height: .36rem;
            line-height: .36rem;
            border-radius: 1rem;
            position: absolute;
            font-size: .14rem;
            overflow: hidden;
            color: #108EE9;
            margin: 0 .07rem;
            cursor: pointer;
            padding: 0 .2rem 0 .5rem;
            right: 0.2rem;
            top: .34rem;
        }
        .informationLineEditBen img {
            position: absolute;
            width: .14rem;
            height: .14rem;
            top: 0.1rem;
            left: .25rem;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="centerPersonalInformationBox">
                <img class="centerPersonalInformationBg" src="img/centerPersonalInformationBg.png" alt="">
                <div class="centerPersonalInformationLine floatClear">
                    <div class="informationLineIcon floatLeft">
                        <img src="img/centerPersonal.png" alt="">
                    </div>
                    <div class="informationLineRight floatLeft">
                        <div class="floatClear">
                            <div class="floatLeft informationLineName">用户名</div>
                            <div class="floatLeft informationLinePhone">18834822166</div>
                        </div>
                        <div class="informationLineText">用于登录北京儿童医院新生儿遗传病筛查系统使用</div>
                    </div>
                </div>
                <div class="centerPersonalInformationLine floatClear">
                    <div class="informationLineIcon floatLeft">
                        <img src="img/centerUser.png" alt="">
                    </div>
                    <div class="informationLineRight floatLeft">
                        <div class="floatClear">
                            <div class="floatLeft informationLineName">角色</div>
                            <div class="floatLeft informationLinePhone">超级管理员</div>
                        </div>
                        <div class="informationLineText">角色不同相对于的权限也不相同，如需更多权限请联系管理员</div>
                    </div>
                </div>
                <div class="centerPersonalInformationLine floatClear">
                    <div class="informationLineIcon floatLeft">
                        <img src="img/centerPass.png" alt="">
                    </div>
                    <div class="informationLineRight floatLeft">
                        <div class="floatClear">
                            <div class="floatLeft informationLineName">密码</div>
                            <div class="floatLeft informationLinePhone" style="color: #6ED089;">已设置</div>
                        </div>
                        <div class="informationLineText">安全性高的密码可以使帐号更安全。建议您定期更换密码</div>
                        <div class="informationLineEditBen" data-toggle="modal" data-target="#edit"><img src="img/note.png" alt="">修改</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--修改模态-->
<div class="modal inmodal fade" id="edit" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modalTitle">修改密码</div>
        <div style="text-align: center;margin-top: .25rem;">
            <label class="modalLabel" for="">原始密码：</label>
            <input class="modalInput" type="text" placeholder="请输入">
        </div>
        <div style="text-align: center;margin-top: .25rem;">
            <label class="modalLabel" for="">新密码：</label>
            <input class="modalInput" type="text" placeholder="请输入">
        </div>
        <div style="text-align: center;margin-top: .25rem;">
            <label class="modalLabel" for="">新密码确认：</label>
            <input class="modalInput" type="text" placeholder="请输入">
        </div>
        <div class="manageEditBtnBox">
            <div class="manageEditBtn manageEditBtnSave">
                <img src="img/save.png" alt="">
                保存
            </div>
            <div class="manageEditBtn manageEditBtnRemove" data-dismiss="modal" aria-hidden="true">
                <img src="img/remove.png" alt="">
                取消
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/global.js?v=3.3.6"></script>
<!-- Flot -->
<script>
    $(document).ready(function () {

    });
</script>
</body>
</html>
